<template > 
    <div class="look"> 
        <div class="w1300">
            <div class="title">
                <span class="tag">
                    正在播放
                </span>
                <span class="titleText">
                    {{ videoList&&videoList[0]&&videoList[0].course?videoList[0].course.name:'' }}
                </span>
            </div>
            <div class="lookCon">
                <div class="video">
                    <ccVideo ref="cc" @endVideo = "endVideo"></ccVideo>
                </div>
                <div class="courseware">
                    <div class="coursewareTitle">
                        <span class="teacherName">
                            {{  }}
                        </span>
                        <span class="coursewareTime">
                            {{ `已更新${2}课时` }}
                        </span>
                    </div>
                    <div class="coursewareLists">
                        <el-tree :data="videoList" node-key = "courseware_id" :props="{children: 'children',label: 'name'}" @node-click="handleNodeClick">
                            <span :class="{active:video_info.courseware_id == data.courseware_id||data.courseware_id == video_info.pid}" class="custom-tree-node" slot-scope="{ node, data }">
                                <span class="label">{{ node.label }}</span>
                                <span class="time">
                                    {{ data.hours }}
                                </span>
                            </span>
                        </el-tree>
                        <!-- <div v-for="(it,idx) in video_info" :key = "idx">

                        </div> -->
                    </div>
                    
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import ccVideo from "../../components/cc/player.vue"
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
    export default {
        name: "tem",
        mixins: [pagePublic],
        components: {
            ccVideo
        },
        data(){
            return{
                videoList:[],
                video_info:{},
                course_id:'',
                courseware_id:'',
                stime:'',
                etime:'',
                progress:'',
                stime:'',
                stime:'',


            }
        },
        computed: {
            ...mapState(['configInfo']),

        },
        created() {
            if(this.$route.params.course_id){
                this.getCourseware()
            }
        },
        beforeDestroy(){
            let dom = this.$refs.cc
            if(dom){
                dom.pause()
            }
        },
        methods:{
            ...mapMutations(['set_configInfo']),
            getCourseware(){
                let id = this.$route.params.course_id?this.$route.params.course_id:''
                this.course_id = id
                this.$api.courseware({
                    course_id:id
                }).then(res=>{
                    this.videoList = res.data.data || []
                    let data = res.data.data&&res.data.data[0]&&res.data.data[0].children&&res.data.data&&res.data.data[0]&&res.data.data[0].children[0]?res.data.data&&res.data.data[0]&&res.data.data[0].children[0]:{}
                    // this.video_info = data
                    // let dom = this.$refs.cc.init
                    this.handleNodeClick(data)
                })
            },
            handleNodeClick(data, vNode,node){
                if(data&&data.pid != 0){
                    this.courseware_id = data.courseware_id
                    let dom = this.$refs.cc
                    console.log(1111)
                    // 如果有值
                    if(this.stime != ''){
                        this.etime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                        this.progress = parseInt(dom.getPosition())
                        console.log(this.progress,12516765464345)
                        this.changeVideo()
                    }else{
                        this.stime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                        
                    }
                    this.video_info = data
                    dom.init(data)
                    
                    
                }
                
            },
            endVideo(e){
                console.log(e,'结束')
                this.progress = parseInt(e)
                this.etime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                this.changeVideo()
                // this.handleNodeClick()
            },
            // 切换下一节
            changeVideo(){
                let params = {
                        course_id:this.course_id,
                        courseware_id:this.courseware_id,
                        stime:this.stime,
                        etime:this.etime,
                        progress:this.progress,
                        platform:'web',
                        uuid:'',
                        status:0
                    }
                    this.addLog(params)
            },
            // 添加看课记录
            addLog(params){
                this.$api.study.studyList.add(params).then(res=>{
                    this.progress = ''
                    this.stime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                    this.etime = ''
                    
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
.look{
    background-color: #f8f8f8;
    padding: 50px 0 150px;

}
.w1300{
    width: 1300px;
    margin: 0 auto;
}
.active{
    color: var(--bg-color,'#FF6900');
}
.title{
    display: flex;
    margin-bottom: 20px;
    .tag{
        display: inline-block;
        padding: 5px 20px;
        margin-right: 20px;
        border-radius: 4px;
        background-color: var(--bg-color,'#FF6900');
        color: #fff;
    }
    .titleText{
        font-size: 24px;
        font-weight: 700;
        color: #333;
    }
}
.lookCon{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .video{
        width: 922px;
        height: 519px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        // border-radius: 4px;
        // overflow: hidden;
    }
    .courseware{
        width: 378px;
        height: 519px;
        overflow: auto;
        background-color: #333;
        .coursewareTitle{
            width: 100%;
            padding: 15px 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #ffffff1a;
            color: #fff;
            font-weight: 400;
            .teacherName{
                font-size: 22px;
                // font-weight: 700;
            }
            .coursewareTime{
                margin-top: 10px;
                font-size: 16px;
            }
        }
        .coursewareLists{
            display: flex;
            flex-direction: column;
            ::v-deep .el-tree{
                background-color: transparent;
                color: #bbbbbb;
            }
            ::v-deep .el-tree-node:focus>.el-tree-node__content{
                background-color: transparent;
                color: #bbbbbb;
            }
            ::v-deep.el-tree-node__content{ &:hover{ background-color: transparent; color: var(--bg-color,'#FF6900');} }
            ::v-deep .el-tree-node__label{
                // width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .custom-tree-node{
                width: 335px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                // color: #bbbbbb;
                background-color: transparent;

                
                .label{
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .time{
                    width: 70px;
                    text-align: right;
                    box-sizing: border-box;
                    padding-right: 10px;
                    margin-left: 30px;
                }
            }
        }
    }
}
</style>